<template>
  <div class="swiprer">
    <el-carousel :interval="4000" type="card" height="200px">
      <el-carousel-item v-for="(item, index) in swiper" :key="index">
        <el-image :src="item.imageUrl" fit="contain" @click="changeUrl(item.targetId, index)"></el-image>
        <el-tag :type="item.typeTitle === '独家' ? 'danger' : 'primary'" effect="dark">{{ item.typeTitle }}</el-tag>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
import { getSwiper, getMusicUrl, getMusicMenu } from '../../../network/swiper.js'
export default {
  data () {
    return {
      swiper: [],
      musicUrl: '',
      musicDetail: {},
      musiclistIds: [],
      musicIndex: 0
    }
  },
  created () {
    this.getSwiper()
  },
  methods: {
    getSwiper () {
      getSwiper().then(res => {
        // console.log(res)
        this.swiper = res.data.banners
        this.swiper.forEach(item => {
          this.musiclistIds.push(item.targetId)
        })
        // console.log(this.swiper)
      })
    },
    // 改变播放音乐地址
    changeUrl (id, index) {
      if (id === null) return
      this.getMusicUrl(id)
      this.getMusicMenu(id)
      this.$store.commit('musicListIds', this.musiclistIds)
      this.$store.commit('musicIndex', index - 1)
      this.$store.commit('setMusicCount', this.musiclistIds.length)
    },
    // 获取音乐地址
    getMusicUrl (id) {
      getMusicUrl(id).then(res => {
        // console.log(res.data.data[0].url)
        if (res.data.data[0].url === null) {
          return this.$message.error('获取资源失败！')
        }
        this.musicUrl = res.data.data[0].url
        this.$store.commit('getNowMusic', this.musicUrl)
      })
    },
    // 获取音乐详情
    getMusicMenu (id) {
      getMusicMenu(id).then(res => {
        // console.log(res.data)
        this.musicDetail = res.data.songs[0]
        this.$store.commit('getnowMusicMenu', this.musicDetail)
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .swiprer {
    width: 90%;
    margin: auto;
    .el-carousel__item {
      overflow: hidden;
      .el-image {
        width: 100%;
        background-size: cover;
      }
      .el-tag {
        height: 19px;
        line-height: 19px;
        position: absolute;
        bottom: 10%;
        right: 0;
        border-radius: 10px 0 0 10px;
      }
    }
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>
